<template>
  <CommonNav title="我的课程" />
  <commonMain>
    <CommonLack v-show="!courseList" />
    <div
      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5 mt-10"
    >
      <div
        v-for="(item, index) in courseList"
        :key="index"
        class="card bg-base-100 shadow-xl"
      >
        <nuxt-link :to="`/user-course/${item.id}`" class="h-full">
          <coursePack :item="item.course">
            <div class="flex flex-col gap-1">
              <progress
                class="progress w-full progress-success"
                :value="item.schedule.chapterRatio"
                max="100"
              ></progress>
              <div class="flex justify-between text-xs text-gray-400">
                <span
                  >{{ item.schedule.chapterEnd }}/{{
                    item.schedule.chapterNum
                  }}课程</span
                >
                <span>{{ item.schedule.chapterRatio }}%完成</span>
              </div>
            </div>
          </coursePack>
        </nuxt-link>
      </div>
    </div>
  </commonMain>
</template>
<script setup lang="ts">
import { getUserCourseList } from "~/composables/user/course";
const courseList = await getUserCourseList();
</script>
